<template>
    <div class="view-main">
        <div class="view-header">
            <div></div>
            <el-button class="button" type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
        </div>
        <div class="view-body">
            <div class="light-table">
                <el-table :data="tableData" height="300" highlight-current-row style="width: 100%">
                    <el-table-column property="name" label="角色名称" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column property="code" label="角色描述" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" align="center" width="330">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button type="text" size="mini" @click="divideAuthority(scope.row)">分配权限</el-button>
                            <el-button type="text" class="danger-color" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
                               :total="total" :current-page="pageNum" :page-size.sync="pageSize" :page-count="pages"
                               @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
            </div>
        </div>
        <el-dialog :title="typeText" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">

            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="80px" size="mini" style="padding-right: 20px" :disabled="type === 2">
                <el-form-item label="角色名称" prop="name">
                    <el-select v-model="addForm.name" placeholder="请选择">
                        <el-option
                                v-for="item in roleNames"
                                :key="item.username"
                                :label="item.username"
                                :value="item.username">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="角色编号" prop="code">
                    <el-input v-model="addForm.code" clearable></el-input>
                </el-form-item>

                <el-form-item label="角色描述" prop="description">
                    <el-input v-model="addForm.description" clearable></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer" v-if="type < 2">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateConfirm('addForm')">确 定</el-button>
            </div>
        </el-dialog>




        <el-dialog :title="typeText" :visible.sync="VisibleAuthority" width="480px" :close-on-click-modal="false">

            <el-form :model="authority" :rules="authorityRules" ref="authority" label-width="80px" size="mini" style="padding-right: 20px">
                <el-form-item label="角色权限" prop="authority">
                    <!--<el-input v-model="addForm.authority" clearable></el-input>-->
                    <el-tree
                            :data="data1"
                            show-checkbox
                            node-key="id"
                            :default-expanded-keys="[0,3]"
                            :default-checked-keys="defKeys"
                            :props="defaultProps">
                        <!--@check="alert()">-->
                    </el-tree>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="type === 3">
                <el-button @click="VisibleAuthority = false">取 消</el-button>
                <el-button type="primary" @click="update('authority')">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import { isEmpty, formatDate, stringFormat,getStartTimeOfDate, getEndTimeOfDate, getStartTimeOfWeek, getEndTimeOfWeek, getStartTimeOfMonth, getEndTimeOfMonth } from '../../utils/util'
    import { getAction } from '@/utils/manage'

export default {
  name: 'user',
  data() {
      return {
          tableData: [],
          pageNum: 1,
          pageSize: 10,
          pages: 0,
          total: 0,
          type: 0,
          roleList: [],
          roleName: [{
              value: '选项1',
              label: '黄金糕'
          }, {
              value: '选项2',
              label: '双皮奶'
          }, {
              value: '选项3',
              label: '蚵仔煎'
          }, {
              value: '选项4',
              label: '龙须面'
          }, {
              value: '选项5',
              label: '北京烤鸭'
          }],
          roleNames: [],
          code: [{
              value: '类型1',
              label: '类型1'
          }, {
              value: '类型2',
              label: '类型2'
          }, {
              value: '类型3',
              label: '类型3'
          }],
          dialogVisible: false,
          VisibleAuthority: false,
          addForm: {
              name: '',
              code: '',
              description: '',
          },
          addRules: {
              name: [{ required: true, message: '请输入角色名称',trigger: 'blur' }],
              code: [{ required: true,message: '请输入角色编号',trigger: 'blur' }],
          },
          authorityRules: {},
          defKeys: [4,7,11],
          data1: [{
              id: 1,
              label: '卷宗管理',
              children: [{
                  id: 4,
                  label: '创建案卷'},
                  {id: 5,
                  label: '案卷记录'},
                  {id: 6,
                  label: '卷宗管理',
                  children: [{
                      id: 18,
                      label: '卷宗记录'
                  }, {
                      id: 19,
                      label: '出库记录'
                  },{
                      id: 20,
                      label: '归还记录'
                  }]
              }]
          }, {
              id: 2,
              label: '系统配置',
              children: [{
                  id: 7,
                  label: '案卷类型'
              }, {
                  id: 8,
                  label: '案卷级别'
              }, {
                  id: 9,
                  label: '卷宗类型'
              }, {
                  id: 10,
                  label: '案卷柜配置'
              }]
          }, {
              id: 3,
              label: '系统管理',
              children: [{
                  id: 11,
                  label: '区域管理'
              }, {
                  id: 12,
                  label: '部门管理'
              },{
                  id: 13,
                  label: '角色管理'
              },{
                  id: 14,
                  label: '用户管理'
              },{
                  id: 15,
                  label: '系统参数'
              },{
                  id: 16,
                  label: '系统日志'
              },{
                  id: 17,
                  label: '系统维护'
              },]
          }],
          defaultProps: {
              children: 'children',
              label: 'label'
          },
          authority:[],
          url: {
              page: '/sys/role',
              delete: '/sys/role/delete/{0}',
              export: '/sys/log/export',
              roleList: '/sys/role/list',
              userList: '/sys/role/getUserName'
          }
      }
  },
    computed: {
        typeText() {
            if (this.type === 0){
                return "新增"
            }else if (this.type === 1){
                return "编辑"
            }else if (this.type === 2){
                return "详情"
            }else if (this.type === 3){
                return "分配权限"
            }
            // return this.type === 0 ? '新增' : this.type === 1 ? '编辑' : this.type === 3 ? '分配权限' : '详情'
        }
    },
    watch: {},
    created() {
        this.getDataList(1)
        this.getRoleList()
        this.getUserList()
    },
  methods:{
      divideAuthority(row){
          console.log("11111111树")
          this.authority = JSON.parse(JSON.stringify(row))
          this.type = 3
          this.VisibleAuthority = true
          if (!isEmpty(this.$refs.authority)) {
              this.$refs.authority.resetFields()
          }
      },
      getDataList(page) {
          this.pageNum = isEmpty(page) ? this.pageNum : page
          this.$http.get(this.url.page, {
                  params: {
                      _pageNum: this.pageNum,
                      _pageSize: this.pageSize
                  }
              })
              .then(data => {
                  var result = data.result
                  this.tableData = result.records
                  this.pageNum = result.current
                  this.pageSize = result.size
                  this.pages = result.pages
                  this.total = result.total
              })
      },
      getUserList() {
          this.$http.get(this.url.userList)
              .then(data => {
                  this.roleNames = data.result
              })
      },
      handlePageChange(page) {
          this.getDataList(page)
      },
      handleSizeChange() {
          this.getDataList()
      },
      getRoleList() {
          this.$http.get(this.url.roleList).then(data => {
              this.roleList = data.result
          })
      },
      handleDetail(row) {
          this.addForm = JSON.parse(JSON.stringify(row))
          this.type = 2
          this.dialogVisible = true
          if (!isEmpty(this.$refs.addForm)) {
              this.$refs.addForm.resetFields()
          }
      },
      handleDelete(row) {
          this.$confirm('确认删除?', '提示', { type: 'warning' }).then(() => {
                  if (!isEmpty(row) && !isEmpty(row.id)) {
                      console.log("112222222")
                      var url = stringFormat(this.url.delete, [row.id])

                      console.log("3333333")
                      console.log(this.url.delete)
                      this.$http.delete(url).then(() => {
                          this.getDataList()
                      })
                  }
              })
              .catch(() => {})
      },
      handleUpdate(row) {
          this.addForm = JSON.parse(JSON.stringify(row))
          this.type = 1
          this.dialogVisible = true
          if (!isEmpty(this.$refs.addForm)) {
              this.$refs.addForm.resetFields()
          }
      },
      handleAdd() {
          this.type = 0
          this.addForm = {
              name: '',
              code: '',
              description: '',
          }
          this.dialogVisible = true
          if (!isEmpty(this.$refs.addForm)) {
              this.$refs.addForm.resetFields()
          }
      },
      updateConfirm() {
          this.$refs.addForm.validate(valid => {
              if (valid) {
                  let _form = JSON.parse(JSON.stringify(this.addForm))
                  if (this.type === 0) {
                      this.$http.put('/sys/role/insert', _form).then(() => {
                          this.getDataList(1)
                      })
                  } else {
                      this.$http.put(`/sys/role/update/${_form.id}`, _form).then(() => {
                          this.getDataList()
                      })
                  }
                  this.dialogVisible = false
              } else {
                  return false
              }
          })
      },
  }
}
</script>
<style scoped>
</style>

<style lang="less" scoped>
    .view-header{
        height: 0px;
    }
    .button{
        position: relative;
        top: -18px;
    }
    .dialog-footer{
        margin-right: 32px;
    }
</style>
